<template>
  <div>
    <div class="banner_box">
      <div class="banner_Modular">
        <span class="banner_Modular_Title" style="color:white">芸助手-全渠道营销管理专家</span>
        <span class="banner_Modular_Subtitle" style="color:white">用技术联结和赋能实体商业</span>
        <div class="banner_Modular_Img">
          <img src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/portal/download/down.png" class="banner_Modular_Img_item">
        </div>
      </div>
      <el-image
      class="indexImg"
      src="http://cdnx.rzico.com/portal/banner.jpg" fit="cover"></el-image>
      <div class="login-container login_box" v-if="token==null">
      <el-form style="" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
               label-position="left">

        <div class="title-container">
          <h3 class="title">
            {{ $t('login.title') }}
          </h3>
        </div>

        <el-form-item prop="username">
        <span class="svg-container">
          <svg-icon icon-class="user"/>
        </span>
          <el-input
            ref="username"
            v-model="loginForm.username"
            :placeholder="$t('手机号/邮箱')"
            name="username"
            type="text"
            tabindex="1"
            autocomplete="on"
          />
        </el-form-item>

        <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
          <el-form-item prop="password">
          <span class="svg-container">
            <svg-icon icon-class="password"/>
          </span>
            <el-input
              :key="passwordType"
              ref="password"
              v-model="loginForm.password"
              :type="passwordType"
              :placeholder="$t('login.password')"
              name="password"
              tabindex="2"
              autocomplete="on"
              @keyup.native="checkCapslock"
              @blur="capsTooltip = false"
              @keyup.enter.native="handleLogin"
            />
            <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
          </span>
          </el-form-item>
        </el-tooltip>

        <el-row>
          <el-col :span="12">
            <el-form-item>
              <el-input type="text" placeholder="请输入验证码" class="verifyCode" v-model="loginForm.verifyCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <div>
              <div class="codeImg" @click="createCaptcha">
                <img :src="codeImg" width="100%" height="100%" alt="">
              </div>
            </div>
          </el-col>
        </el-row>

        <el-button :loading="loading" type="primary" class="login_Button" style="width:100%;margin-bottom:20px;"
                   @click.native.prevent="handleLogin">
          {{ $t('login.logIn') }}
        </el-button>


        <el-row justify="center">
          <el-col :span="8" align="center">
            <a class="label-button" @click="forget">
              <!--<svg-icon icon-class="password"/>-->
              <span class="login_Forget">&nbsp;忘记密码</span></a>
          </el-col>
        </el-row>
      </el-form>
      </div>
      <div class="login-container login_box" v-if="token != null">
        <h3 class="user_title">控制台</h3>
        <div class="login_User">
          <div class="login_title_img">
            <img :src="avatar" class="user-avatar">
          </div>
          <span class="user_Name">{{ name }}</span>
        </div>
        <el-form style="" ref="loginForm" :model="loginForm" :rules="loginRules" class="login_From" autocomplete="on"
                 label-position="left">

        <el-button :loading="loading" type="primary" class="console_Button" style="width:100%;margin-bottom:20px;"
                   @click.native.prevent="loginIndex">
         <span>点击进入控制台</span>
        </el-button>
        </el-form>
      </div>
      </div>
    <div class="index_Content">
      <span class="index_Content_header">产品体系</span>
      <div class="index_content_box">
        <div class="index_content_item">
          <div class="index_content_item_logo">
            <img src="http://cdnx.rzico.com/portal/water.jpg" class="product_icon">
          </div>
          <div class="index_content_item_line"></div>
          <span class="index_content_item_title">芸订水</span>
          <span class="index_content_item_subtitle">一款简单实用的订水软件,基于互联网技术构建水厂、经销商、水站、用户一站式全渠道营销解决方案。</span>
<!--          <span class="index_content_item_bottomtitle">了解芸订水详情>></span>-->
        </div>
        <div class="index_content_item">
          <div class="index_content_item_logo" >
            <img src="http://cdnx.rzico.com/portal/shop.svg" class="product_icon">
          </div>
          <div class="index_content_item_line"></div>
          <span class="index_content_item_title">芸商城</span>
          <span class="index_content_item_subtitle">以微信、抖音等主流社交平台为载体、整合社群资源实现商家线上、线下营销一体化的分销解决方案。</span>
<!--          <span class="index_content_item_bottomtitle">了解芸订水详情>></span>-->
        </div>
        <div class="index_content_item">
          <div class="index_content_item_logo">
            <img src="http://cdnx.rzico.com/portal/order.svg" class="product_icon">
          </div>
          <div class="index_content_item_line"></div>
          <span class="index_content_item_title">芸商店</span>
          <span class="index_content_item_subtitle">聚合微信、支付宝、京东、银闪付主流支付，门店收银管理、对接各美团、饿了么轻松实现智能管店。</span>
<!--          <span class="index_content_item_bottomtitle">了解芸订水详情>></span>-->
        </div>
        <!--<div class="index_content_item">-->
          <!--<div class="index_content_item_logo">-->
            <!--<img src="http://cdnx.rzico.com/portal/parcise.svg" class="product_icon">-->
          <!--</div>-->
          <!--<div class="index_content_item_line"></div>-->
          <!--<span class="index_content_item_title">芸</span>-->
          <!--<span class="index_content_item_subtitle">一款线上云端管理平台与线下停车场系统完美融合的应用产品，利用5G网络、和互联网技术，实现车场数据云存储、车场系统云管理和财务数据云统计。</span>-->
<!--&lt;!&ndash;          <span class="index_content_item_bottomtitle">了解芸订水详情>></span>&ndash;&gt;-->
        <!--</div>-->
      </div>
    </div>
<!--产品定价-->
    <div style="width: 100%; background-color: #fafafa; display: flex;justify-content: center" class="index_Conter">
      <span class="index_Content_header">产品定价</span>
      <div class="card_box">
        <div class="card_box_item">
          <div class="card_box_item_header">
            <span class="card_box_item_headerTitle">免费版</span>
          </div>
          <span class="card_box_item_title">适用单门店、经销商特约商户</span>
          <span class="card_box_item_subtitle">完成店内进销存、客户管理、财务管理、营销活动、配送管理等核心功能并店内员工不超过5人。</span>
          <span class="originalPrice">原价:980/年</span>
          <div class="card_box_item_priceTwo">
            <span class="card_box_item_priceIcon">¥</span>
            <span class="card_box_item_priceNum">0.00</span>
            <span class="card_box_item_priceDate">/年</span>
          </div>
          <!--<div class="card_box_item_bottom">-->
            <!--<a href="#" target="_blank"><span class="card_box_item_span">立即体验</span></a>-->
          <!--</div>-->
        </div>
        <div class="card_box_item">
          <div class="card_box_item_headerTwo">
            <span class="card_box_item_headerTitle">基础版</span>
          </div>
          <span class="card_box_item_title">适用单门店、开通全网营销客户</span>
          <span class="card_box_item_subtitle">完成店内进销存、客户管理、财务管理、营销活动、配送管理等核心功能并支持微信小程序。</span>
          <span class="originalPrice">原价:3880/年</span>
          <div class="card_box_item_priceTwo">
            <span class="card_box_item_priceIconTwo">¥</span>
            <span class="card_box_item_priceNumTwo">980</span>
            <span class="card_box_item_priceDate">/年</span>
          </div>
          <!--<div class="card_box_item_bottomTwo">-->
            <!--<a href="#" target="_blank"><span class="card_box_item_span">立即购买</span></a>-->
          <!--</div>-->
        </div>
        <div class="card_box_item">
          <div class="card_box_item_headerThree">
            <span class="card_box_item_headerTitle">标准版</span>
          </div>
          <span class="card_box_item_title">适用连锁店、开通全网营销客户</span>
          <span class="card_box_item_subtitle">完成店内进销存、客户管理、财务管理、营销活动、配送管理等核心功能并支持微信小程序。</span>
          <span class="originalPrice">原价:9800/年</span>
          <div class="card_box_item_priceTwo">
            <span class="card_box_item_priceIconThree">¥</span>
            <span class="card_box_item_priceNumThree">5800</span>
            <span class="card_box_item_priceDate">/年</span>
          </div>
          <!--<div class="card_box_item_bottomThree">-->
            <!--<a href="#" target="_blank"><span class="card_box_item_span">立即购买</span></a>-->
          <!--</div>-->
        </div>
        <div class="card_box_item">
          <div  style="background-color: red;"  class="card_box_item_headerThree">
            <span class="card_box_item_headerTitle">旗舰版</span>
          </div>
          <span class="card_box_item_title">适用经销商及厂家、全渠道管理</span>
          <span class="card_box_item_subtitle">完成店内进销存、客户管理、财务管理、营销活动、配送管理等核心功能并整合全渠道资源。</span>
          <span class="originalPrice">原价:19800/年</span>
          <div class="card_box_item_priceTwo">
            <span style="color: red;"  class="card_box_item_priceIconThree">¥</span>
            <span style="color: red;"  class="card_box_item_priceNumThree">9800</span>
            <span class="card_box_item_priceDate">/年</span>
          </div>
          <!--<div style="background-color: red;"  class="card_box_item_bottomThree">-->
            <!--<a href="#" target="_blank"><span class="card_box_item_span">立即购买</span></a>-->
          <!--</div>-->
        </div>
      </div>
    </div>
<!--    定价表格-->
    <div class="index_Content">
      <div class="table_box">
        <div class="table_header">
          <div class="table_header_item_left border-right">
            <span class="table_header_item_title">功能名称</span>
          </div>
          <div class="table_header_item border-right">
            <span class="table_header_item_title">免费版</span>
          </div>
          <div class="table_header_item border-right">
            <span class="table_header_item_title">基础版</span>
          </div>
          <div class="table_header_item border-right">
            <span class="table_header_item_title">标准版</span>
          </div>
          <div class="table_header_item">
            <span class="table_header_item_title">旗舰版</span>
          </div>
        </div>
        <div class="table_item">
          <div class="table_item_header">
            <span class="table_item_header_title">核心功能</span>
          </div>
           <div class="table_item_content">
            <div class="table_item_content_itemOne border-right">
              <span class="table_item_header_title">&nbsp;&nbsp;&nbsp;&nbsp;营销活动</span>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
          </div>
          <div class="table_item_content">
            <div class="table_item_content_itemOne border-right">
              <span class="table_item_header_title">&nbsp;&nbsp;&nbsp;&nbsp;进货管理</span>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
          </div>
          <div class="table_item_content">
            <div class="table_item_content_itemOne border-right">
              <span class="table_item_header_title">&nbsp;&nbsp;&nbsp;&nbsp;销售管理</span>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
          </div>
          <div class="table_item_content">
            <div class="table_item_content_itemOne border-right">
              <span class="table_item_header_title">&nbsp;&nbsp;&nbsp;&nbsp;库存管理</span>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
          </div>
          <div class="table_item_content">
            <div class="table_item_content_itemOne border-right">
              <span class="table_item_header_title">&nbsp;&nbsp;&nbsp;&nbsp;客户管理</span>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
          </div>
          <div class="table_item_content">
            <div class="table_item_content_itemOne border-right">
              <span class="table_item_header_title">&nbsp;&nbsp;&nbsp;&nbsp;配送管理</span>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
          </div>
          <div class="table_item_content">
            <div class="table_item_content_itemOne border-right">
              <span class="table_item_header_title">&nbsp;&nbsp;&nbsp;&nbsp;结算管理</span>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="table_item">
          <div class="table_item_header">
            <span class="table_item_header_title">外部设行</span>
          </div>
          <div class="table_item_content">
            <div class="table_item_content_itemOne border-right">
              <span class="table_item_header_title">&nbsp;&nbsp;&nbsp;&nbsp;电话弹屏</span>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
          </div>
          <div class="table_item_content">
            <div class="table_item_content_itemOne border-right">
              <span class="table_item_header_title">&nbsp;&nbsp;&nbsp;&nbsp;芸打印机</span>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
          </div>
        </div>

        <div class="table_item">
          <div class="table_item_header">
            <span class="table_item_header_title">全网营销</span>
          </div>
          <div class="table_item_content">
            <div class="table_item_content_itemOne border-right">
              <span class="table_item_header_title">&nbsp;&nbsp;&nbsp;&nbsp;微信小程序</span>
            </div>
            <div class="table_item_content_item border-right">

            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
          </div>
          <div class="table_item_content">
            <div class="table_item_content_itemOne border-right">
              <span class="table_item_header_title">&nbsp;&nbsp;&nbsp;&nbsp;B2B批发商城</span>
            </div>
            <div class="table_item_content_item border-right">

            </div>
            <div class="table_item_content_item border-right">

            </div>
            <div class="table_item_content_item border-right">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
            <div class="table_item_content_item">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
          </div>
          <div class="table_item_content">
            <div class="table_item_content_itemOne border-right">
              <span class="table_item_header_title">&nbsp;&nbsp;&nbsp;&nbsp;全网配送系统</span>
            </div>
            <div class="table_item_content_item border-right">

            </div>
            <div class="table_item_content_item border-right">

            </div>
            <div class="table_item_content_item border-right">
            </div>
            <div class="table_item_content_item">
              <div class="table_item_content_item_iconBox">
                <i class="el-icon-check table_item_content_item_icon"></i>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!--<div class="index_Conter">-->
      <!--<span class="index_Content_header">芸助手独特之处</span>-->
      <!--<div class="index_content_box">-->
        <!--<div class="index_content_conter">-->
          <!--<div class="index_content_item_top">-->
            <!--<img src="http://cdnx.rzico.com/portal/intelligence.svg" class="technology_icon">-->
          <!--</div>-->
          <!--<span class="index_content_top_bottomtitle">构建技术能力闭环</span>-->
          <!--<span class="index_content_top_subtitle">借助大数据、云计算、物联网等信息技术，构建技术咨询、平台建设、运营服务三大业务体系，为各行各业实现商业互联网+ 新零售运营提供技术解决方案。</span>-->

        <!--</div>-->
        <!--<div class="index_content_conter">-->
          <!--<div class="index_content_item_top">-->
            <!--<img src="http://cdnx.rzico.com/portal/accurate.svg" class="technology_icon">-->
          <!--</div>-->
          <!--<span class="index_content_top_bottomtitle">覆盖每个经营环节</span>-->
          <!--<span class="index_content_top_subtitle">从营销获客到产品服务，再到用户管理，每个经营环节都覆盖贯通，手机实时查看，随时查询掌握店铺的经营数据和流水进账情况。</span>-->

        <!--</div>-->
        <!--<div class="index_content_conter">-->
          <!--<div class="index_content_item_top">-->
            <!--<img src="http://cdnx.rzico.com/portal/rise.svg" class="technology_icon">-->
          <!--</div>-->
          <!--<span class="index_content_top_bottomtitle">不同场景应用方案</span>-->
          <!--<span class="index_content_top_subtitle">从客户真实场景出发，运用芸助手产品能力满足您的使用场景需求,产品矩阵包括线上商城、线下管理、移动管家等</span>-->

        <!--</div>-->
        <!--<div class="index_content_conter">-->
          <!--<div class="index_content_item_top">-->
            <!--<img src="http://cdnx.rzico.com/portal/tool.svg" class="technology_icon">-->
          <!--</div>-->
          <!--<span class="index_content_top_bottomtitle">优质客户服务体验</span>-->
          <!--<span class="index_content_top_subtitle">不仅关注客户在使用过程中的体验和满意度，更以支持客户的业务增长作为服务目标，在满足客户的需求过程中不断优化自身的服务能力。</span>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
    <!--<div class="index_Content">-->
      <!--<span class="index_Content_header">合作优势</span>-->
      <!--<div class="cooperation_advantage_item_content">-->
        <!--<div class="cooperation_advantage_item">-->
          <!--<div class="line1" style="background-color: #01b6fb;"></div>-->
          <!--<span class="advantage_item_title" style="color: #01b6fb;">市场支持</span>-->
          <!--<div>-->
            <!--<span class="advantage_item_text">将自身产品及服务进行针对性的市场推广和品牌建设，为合作商提供业务支撑和物料支持。</span>-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="cooperation_advantage_item">-->
          <!--<div class="line1" style="background-color: #ae5da1;"></div>-->
          <!--<span class="advantage_item_title" style="color: #ae5da1;">服务支持</span>-->
          <!--<div>-->
            <!--<span class="advantage_item_text">完善的以客户为中心的运营系统，全方位提供7*24小时售后服务快速为用户提供技术支持。</span>-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="cooperation_advantage_item">-->
          <!--<div class="line1" style="background-color: #32B16C"></div>-->
          <!--<span class="advantage_item_title" style="color: #32B16C;">培训支持</span>-->
          <!--<div>-->
            <!--<span class="advantage_item_text">定期线上产品培训，定期线下交流和沙龙，渠道经理走访辅导，开展运营能力和市场销售集训。</span>-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="cooperation_advantage_item">-->
          <!--<div class="line1" style="background-color: #EC8A00"></div>-->
          <!--<span class="advantage_item_title" style="color: #EC8A00">升级优惠</span>-->
          <!--<div>-->
            <!--<span class="advantage_item_text">不定期举办软件升级优惠活动，发放优惠折扣券，最大限度让利给合作商，详情请联系客服咨询。</span>-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="cooperation_advantage_item">-->
          <!--<div class="line1" style="background-color: #01B6FB"></div>-->
          <!--<span class="advantage_item_title" style="color: #01B6FB">丰厚返利</span>-->
          <!--<div>-->
            <!--<span class="advantage_item_text">高回报返利体系，行之有效的分配机制和奖励政策，确保合作商长期丰厚的利润收益。</span>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
<!--    <div class="index_Content">-->
<!--      <span class="index_Content_header">媒体中心</span>-->
<!--      <div class="index_content_boxTwo">-->
<!--        <div class="index_content_bottom">-->
<!--          <div class="index_content_bottom_logo">-->
<!--            <img src="http://cdnx.rzico.com/portal/news.svg" class="media_icon">-->
<!--          </div>-->
<!--          <span class="index_content_item_title">公司新闻</span>-->
<!--          <ul type="circle" class="index_content_bottom_ui">-->
<!--            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>-->
<!--            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>-->
<!--            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>-->
<!--          </ul>-->
<!--        </div>-->
<!--        <div class="index_content_bottom">-->
<!--          <div class="index_content_bottom_logo">-->
<!--            <img src="http://cdnx.rzico.com/portal/signal.svg" class="media_icon">-->
<!--          </div>-->
<!--          <span class="index_content_item_title">行业新闻</span>-->
<!--          <ul type="circle" class="index_content_bottom_ui">-->
<!--            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>-->
<!--            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>-->
<!--            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>-->
<!--          </ul>-->
<!--        </div>-->
<!--        <div class="index_content_bottom">-->
<!--          <div class="index_content_bottom_logo">-->
<!--            <img src="http://cdnx.rzico.com/portal/investigation.svg" class="media_icon">-->
<!--          </div>-->
<!--          <span class="index_content_item_title">市场活动</span>-->
<!--          <ul type="circle" class="index_content_bottom_ui">-->
<!--            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>-->
<!--            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>-->
<!--            <li class="index_content_bottom_li">厦门市思明区龙山中路号启达时尚大厦室专业饮用水及生活品快送服</li>-->
<!--          </ul>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <div class="index_skills">
      <div class="index_skills_box">
      <div class="index_skills_item">
        <div class="index_skills_item_img">
          <img src="http://cdnx.rzico.com/portal/tec.svg" class="bottom_icon">
        </div>
        <span class="index_skills_item_title">技术领先</span>
        <span class="index_skills_item_subtitle">专业团队，借力研发</span>
      </div>
      <div class="index_skills_item">
        <div class="index_skills_item_img">
          <img src="http://cdnx.rzico.com/portal/security.svg" class="bottom_icon">
        </div>
        <span class="index_skills_item_title">系统稳定</span>
        <span class="index_skills_item_subtitle">7x24小时实时护航</span>
      </div>
      <div class="index_skills_item">
        <div class="index_skills_item_img">
          <img src="http://cdnx.rzico.com/portal/ser.svg" class="bottom_icon">
        </div>
        <span class="index_skills_item_title">服务专业</span>
        <span class="index_skills_item_subtitle">在线客服随时响应</span>
      </div>
      <div class="index_skills_item">
        <div class="index_skills_item_img">
          <img src="http://cdnx.rzico.com/portal/wallet.svg" class="bottom_icon">
        </div>
        <span class="index_skills_item_title">交易便携</span>
        <span class="index_skills_item_subtitle">安全交易，快速便捷</span>
      </div>
      <div class="index_skills_item">
        <div class="index_skills_item_img">
          <img src="http://cdnx.rzico.com/portal/gttup.svg" class="bottom_icon">
        </div>
        <span class="index_skills_item_title">口碑优质</span>
        <span class="index_skills_item_subtitle">知名机构信赖推荐</span>
      </div>
      <div class="index_skills_item">
        <div class="index_skills_item_img">
          <img src="http://cdnx.rzico.com/portal/money.svg" class="bottom_icon">
        </div>
        <span class="index_skills_item_title">费用节省</span>
        <span class="index_skills_item_subtitle">商家扶持，好又省</span>
      </div>
      </div>
    </div>
  </div>
</template>

<script>

import {validUsername} from '@/utils/validate'
import utils from '../../../utils/utils.js'
import ElRow from "element-ui/packages/row/src/row";
import ElCol from "element-ui/packages/col/src/col";
import { mapGetters } from 'vuex'

export default {
  components: {
    ElCol,
    ElRow
  },
  name: 'Login',
  computed: {
    ...mapGetters([
      'token','avatar','name'
    ])
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: '',
        password: '',
        verifyCode: '',
        verifyCodeKey: ''
      },
      loginRules: {
        username: [{required: true, trigger: 'blur'}],
        password: [{required: true, trigger: 'blur', validator: validatePassword}],
        verifyCode: [{required: true, trigger: 'blur'}]
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      redirect: undefined,
      otherQuery: {},
      codeImg:null,
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
    this.loginForm.verifyCodeKey = utils.getUUID()
    this.createCaptcha()
    // window.addEventListener('storage', this.afterQRScan)
  },
  mounted() {
    // if (this.loginForm.username === '') {
    //   this.$refs.username.focus()
    // } else if (this.loginForm.password === '') {
    //   this.$refs.password.focus()
    // }
  },
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    forget() {
      this.$router.push('/password')
    },
    register() {
      this.$router.push('/register')
    },
    // 图片验证码
    createCaptcha() {
      var _this = this
      _this.codeImg = process.env.VUE_APP_BASE_API + '/user/getVerifyCode?verifyCodeKey=' + _this.loginForm.verifyCodeKey + '&date=' + new Date().getTime()
    },
    checkCapslock(e) {
      const {key} = e
      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              console.log('login success!!')
              this.createCaptcha()
              this.$router.push({path: '/', query: this.otherQuery})
              this.loading = false
            })
            .catch(() => {
              console.log('login error!!')
              this.createCaptcha()
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          this.createCaptcha()
          this.loading = false
          return false
        }
      })
    },
    loginIndex(){
      this.$router.push('/')
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
    // afterQRScan() {
    //   if (e.key === 'x-admin-oauth-code') {
    //     const code = getQueryObject(e.newValue)
    //     const codeMap = {
    //       wechat: 'code',
    //       tencent: 'code'
    //     }
    //     const type = codeMap[this.auth_type]
    //     const codeName = code[type]
    //     if (codeName) {
    //       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
    //         this.$router.push({ path: this.redirect || '/' })
    //       })
    //     } else {
    //       alert('第三方登录失败')
    //     }
    //   }
    // }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
.login_User{
  width: auto;
  height: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.user-avatar {
  cursor: pointer;
  width: 60px;
  height: 60px;
  border-radius: 30px;
}
.user_Name {
  padding: 20px 0;
}
.user_title {
  text-align: center;
  position: absolute;
  top: 20px;
}

//定价
.card_box_item_header{
  width: 100%;
  height: 64px;
  background-color: rgb(0,181,255);
  display: flex;
  justify-content: center;
  align-items: center;
}
.card_box_item_headerTitle{
  font-size: 32px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #FFFFFF;

}
.card_box_item_headerTwo{
  width: 100%;
  height: 64px;
  background-color: rgb(190,74,160);
  display: flex;
  justify-content: center;
  align-items: center;
}
.card_box_item_headerThree{
  width: 100%;
  height: 64px;
  background-color: rgb(251,134,0);
  display: flex;
  justify-content: center;
  align-items: center;
}
.card_box_item_title{
  text-align: center;
  /*width: 50%;*/
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
  margin-top: 30px;
}
.card_box_item_subtitle{
  padding: 0px 20px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #747474;
  line-height: 17px;
  margin-top: 20px;
  text-align: justify;
}
.card_box_item_price{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  margin-top: 40px;
}
.card_box_item_priceTwo{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.card_box_item_priceIcon{
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #01B6FB;
  margin-bottom: 2px;
  margin-right: 2px;
}
.card_box_item_priceIconTwo{
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #AE5DA1;
  margin-bottom: 2px;
  margin-right: 2px;
}
.card_box_item_priceIconThree{
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #EC8A00;
  margin-bottom: 2px;
  margin-right: 2px;
}
.card_box_item_priceNum{
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #01B6FB;
  padding-top: 4px;
}
.card_box_item_priceNumTwo{
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #AE5DA1;
  padding-top: 4px;
}
.card_box_item_priceNumThree{
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #EC8A00;
  padding-top: 4px;
}
.card_box_item_priceDate{
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(0,0,0,0.4);
  margin-bottom: 4px;
}
.card_box_item_bottom{
  width: 120px;
  height: 35px;
  background-color: rgb(0,181,255);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.card_box_item_bottomTwo{
  width: 120px;
  height: 35px;
  background-color: rgb(190,74,160);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.card_box_item_bottomThree{
  width: 120px;
  height: 35px;
  background-color: rgb(251,134,0);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.card_box_item_span{
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #FFFFFF;
}
.originalPrice{
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #A0A0A0;
  text-decoration:line-through;
  margin-top: 26px;
}
@supports (-webkit-mask: none) and (not (cater-color: #000)) {
  .login-container .el-input input {
    color: #000;
  }
}


/* reset element-ui style */
.login-container {
  position: relative;
  // background: #dfe6ec;
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: #fff;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color:#2d3a4b;
      height: 47px;
      //caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px #fff inset !important;
        -webkit-text-fill-color: #000 !important;
      }
    }
  }

  .el-form-item {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style lang="scss" scoped>
  .indexImg{
    background: radial-gradient(black, transparent);
    display: block;
    width: 100vw;
    /*width: 1200px;*/
    /*height: 525px;*/

  }
  .banner {
    height: 220px;
  }
  .banner_box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: #1b6bfe;*/
    width: 100vw;
    /*height: 300px;*/
  }
  /*移植登陆样式*/
  .login-container {
    min-height: 360px;
    width: 360px;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 10%;
    top: 10%;

  .login-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 405px;
    height: 100px;
    padding: 50px 40px 10px 40px;
    justify-content: flex-start;
  img {
    width: 60px;
    height: 60px;
  }

  span {
    margin-left: 20px;
    font-size: 30px;
    font-weight: bold;
  }
  }

  .login-left {
    width: 400px;
    height: 400px;

  .login-banner {
    width: 100%;
  }
  }

  .login-right {
    width: 400px;
    height: 400px;
    padding: 0 50px;
    position: relative;
    background: #fff;
  }

  .login-form {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    /*max-width: 100%;*/
  //padding: 120px 0px 0;
    margin: 0 0;
    overflow: hidden;
  }

  .login_From {
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, -50%);
    width: 320px;
    /*max-width: 100%;*/
    //padding: 120px 0px 0;
    margin: 0 0;
    overflow: hidden;
  }

  .label-button {
    border-bottom: 0px solid #dfe6ec;
    padding-bottom: 10px;
    margin: 10px auto;
    font-weight: bold;
    color: #2d3a4b;
  }

  .tips {
    margin-bottom: 20px;
    font-size: 14px;
    color: #fff;

  span {
  &:first-of-type {
     margin-right: 16px;
   }
  }
  }

  .codeImg {
    height: 49px;
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color:#889aa4;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

  .title {
    font-size: 20px;
    color: #2d3a4b;
    margin: 0px auto 20px auto;
    text-align: center;
    /*font-weight: bold;*/
  }

  .set-language {
    color: #fff;
    position: absolute;
    top: 3px;
    font-size: 18px;
    right: 0px;
    cursor: pointer;
  }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
  }

  .thirdparty-button {
    position: absolute;
    right: 0;
    bottom: 0px;
  }

  @media only screen and (max-width: 470px) {
    .thirdparty-button {
      display: none;
    }
    .thirdparty-button {
      display: none;
    }
  }


  .pan-back-btn {
    background: #008489;
    color: #fff;
    border: none !important;
  }

  .pan-gif {
    margin: 0 auto;
    display: block;
  }

  .pan-img {
    display: block;
    margin: 0 auto;
    width: 100%;
  }

  .text-jumbo {
    font-size: 60px;
    font-weight: 700;
    color: #484848;
  }

  .list-unstyled {
    font-size: 14px;

  li {
    padding-bottom: 5px;
  }

  a {
    color: #008489;
    text-decoration: none;

  &:hover {
     text-decoration: underline;
   }
  }
  }

  .login-bottom {
    /* margin-top: 4%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;*/
    /*position: absolute;
    display: block;
    width: 100%;
    bottom: 4%;*/
    line-height: 30px;
    text-align: center;
    margin-bottom: 30px;

  p:nth-child(1) {
    font-size: 17px;
    color: #2d3a4b;
  }

  p:nth-child(2) {
    font-size: 10px;
    color: #2d3a4b;
  }
  }
  }



  @media screen and (min-width: 0px) and (max-width: 329px) {
    .index_Content{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      background-color: rgb(237,237,237);
      padding:30px 20px;
    }
    .product_icon{
      width: 35px;
    }
    .technology_icon{
      width: 40px;
    }
    .media_icon{
      width: 30px;
    }
    .bottom_icon{
      width: 20px;
    }
    .index_Conter{
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .index_Content_header{
      font-size: 21px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .index_content_box{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
    }
    .index_content_boxTwo{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      flex-wrap: wrap;
    }
    .index_content_item{
      width: 95vw;
      height: auto;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 20px;
      margin-top: 40px;
      //margin-left: 10px;
      //margin-right: 10px;
    }
    .index_content_bottom{
      width: 90%;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 10px;
      margin-right: 10px;
    }
    .index_content_item_line{
      width: 100%;
      height: 4px;
      background-color: rgb(0,181,255);
    }
    .index_content_item_logo{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_bottom_logo{
      width: 50px;
      height: 50px;
      border-radius: 6px;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_item_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 35px;
    }
    .index_content_item_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 17px;
      //width: 240px;
      text-align: justify;
      padding: 0 20px;
      margin-top: 20px;
    }
    /*.index_content_item_bottomtitle{*/
    /*  font-size: 12px;*/
    /*  font-family: Microsoft YaHei;*/
    /*  font-weight: 400;*/
    /*  color: #01B6FB;*/
    /*  margin-top: 10px;*/
    /*}*/
    .index_content_top_bottomtitle{
      text-align: center;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #01B6FB;
      margin-top: 13px;
    }
    .index_content_item_top{
      width: 100%;
      height: 58px;
      background-color: #ededed;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_top_subtitle{
      text-align: justify;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 17px;
      margin-top: 12px;
    }
    .index_content_conter{
      width: 90%;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
      margin-left: 10px;
      margin-right: 10px;
      padding-bottom: 20px;
    }
    .index_content_bottom_li{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      width: 100%;
      margin-bottom: 10px;
    }
    .index_content_bottom_ui{
      width: 100%;
      padding-right: 20px;
    }
    .index_skills{
      width: 100%;
      background-color: white;
      padding-top: 20px;
      /*padding-bottom: 20px;*/
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item{
      width: 120px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 20px;
    }
    .index_skills_item_img{
      width: 31px;
      height: 31px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item_title{
      font-size: 10px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 12px;
    }
    .index_skills_item_subtitle{
      font-size: 10px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      margin-top: 5px;
    }
    .index_skills_box{
      width: 460px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    //合作
    .cooperation_advantage_content{
      background-color: #fafafa;
      width: 100%;
      padding-top: 34px;
      padding-bottom: 20px;
      padding-left: 20px;
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .cooperation_advantage_text{
      text-align: center;
      /*width: 163px;*/
      height: 36px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .cooperation_advantage_item_content{
      display: flex;
      margin-top: 30px;
      /*overflow-x: auto;*/
      justify-content: center;
      flex-wrap: wrap;
      width: 85%;
    }
    .cooperation_advantage_item{
      flex-shrink: 0;
      width: 100%;
      height: 100%;
      /*background-color: red;*/
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: white;
      padding-bottom: 20px;
      margin-bottom: 20px;
      box-sizing: border-box;
    }
    .line1{
      height: 5px;
      width: 100%;
      /*background-color: #01b6fb;*/
    }
    .advantage_item_title{
      text-align: center;
      margin-top: 20px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .advantage_item_text{
      display: block;
      margin-bottom: 5px;
      color: #747474;
      font-size: 13px;
      margin-left: 20px;
      margin-right: 20px;
    }
    //定价
    .card_box{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 10px;
    //padding-bottom: 20px;
    width: 100%;
    justify-content: center;
  }
  .card_box_item{
    width: 95vw;
    height: auto;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    padding-bottom: 20px;
  }
    .card_box_item_headerTitle{
      font-size: 28px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #FFFFFF;

    }
    .table_header_item_left {
      width: 80px;
      height: 60px;
      background-color: rgb(251,251,251);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  .table_header_item{
    width: 60px;
    height: 60px;
    background-color: rgb(251,251,251);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .table_item_content_item{
    width: 60px;
    height: 30px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .table_item_content_itemOne{
    width: 80px;
    height: 30px;
    background-color: white;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }
  .table_header_item_title{
    font-size: 12px;
    font-weight: bold;
  }
  .table_box {
    border: 1px solid rgb(237, 237, 237);
    //margin-top: 20px;
    margin-bottom: 40px;
    width: 100%;
  }
  .table_item_header_title{
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .table_item_content_item_iconBox{
    width: 16px;
    height: 16px;
    background-color: #409EFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .table_item_content_item_icon{
    font-size: 12px;
    color: white;
  }
  }
  @media screen and (min-width: 330px) and (max-width: 749px) {
    .index_Content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      background-color: rgb(237, 237, 237);
      padding: 35px 0;
    }
    .product_icon{
        width: 35px;
      }
    .technology_icon{
      width: 40px;
    }
    .media_icon{
      width: 30px;
    }
    .bottom_icon{
      width: 30px;
    }
    .index_Conter{
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .index_Content_header{
      font-size: 21px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .index_content_box{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      flex-wrap: wrap;
    }
    .index_content_boxTwo{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 320px;
      flex-wrap: wrap;
    }
    .index_content_item{
      width: 95vw;
      height: auto;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 20px;
      margin-top: 40px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .index_content_bottom{
      width: 380px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 10px;
      margin-right: 10px;
    }
    .index_content_item_line{
      width: 100%;
      height: 4px;
      background-color: rgb(0,181,255);
    }
    .index_content_item_logo{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_bottom_logo{
      width: 50px;
      height: 50px;
      border-radius: 6px;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_item_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 35px;
    }
    .index_content_item_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 17px;
      //width: 240px;
      text-align: justify;
      padding: 0 20px;
      margin-top: 20px;
    }
    /*.index_content_item_bottomtitle{*/
    /*  font-size: 12px;*/
    /*  font-family: Microsoft YaHei;*/
    /*  font-weight: 400;*/
    /*  color: #01B6FB;*/
    /*  margin-top: 10px;*/
    /*}*/
    .index_content_top_bottomtitle{
      text-align: center;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #01B6FB;
      margin-top: 13px;
    }
    .index_content_item_top{
      width: 280px;
      height: 58px;
      background-color: #ededed;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_top_subtitle{
      text-align: justify;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 17px;
      margin-top: 12px;
    }
    .index_content_conter{
      width: 280px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
      margin-left: 10px;
      margin-right: 10px;
      padding-bottom: 20px;
    }
    .index_content_bottom_li{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      width: 100%;
      margin-bottom: 10px;
    }
    .index_content_bottom_ui{
      width: 100%;
      padding-right: 20px;
    }
    .index_skills{
      width: 100%;
      background-color: white;
      padding-top: 25px;
      /*padding-bottom: 25px;*/
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item{
      width: 140px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 20px;
    }
    .index_skills_item_img{
      width: 31px;
      height: 31px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item_title{
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 12px;
    }
    .index_skills_item_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      margin-top: 5px;
    }
    .index_skills_box{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    //合作
    .cooperation_advantage_content{
      background-color: #fafafa;
      width: 100%;
      padding-top: 30px;
      padding-bottom: 20px;
      padding-left: 20px;
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .cooperation_advantage_text{
      /*width: 163px;*/
      height: 36px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .cooperation_advantage_item_content{
      display: flex;
      margin-top: 30px;
      /*overflow-x: auto;*/
      justify-content: center;
      flex-wrap: wrap;
      width:100%;
    }
    .cooperation_advantage_item{
      flex-shrink: 0;
      width: 300px;
      height: 100%;
      /*background-color: red;*/
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: white;
      padding-bottom: 20px;
      margin-right: 25px;
      margin-left: 25px;
      margin-bottom: 20px;
      box-sizing: border-box;
    }
    .line1{
      height: 5px;
      width: 100%;
      /*background-color: #01b6fb;*/
    }
    .advantage_item_title{
      margin-top: 32px;
      font-size: 17px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .advantage_item_text{
      display: block;
      margin-bottom: 5px;
      color: #747474;
      font-size: 13px;
      line-height: 17px;
      margin-left: 20px;
      margin-right: 20px;
    }
    //定价
    .card_box{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding-top: 20px;
      //padding-bottom: 50px;
      width: 100%;
      justify-content: center;
    }
    .card_box_item{
      width: 95vw;
      height: auto;
      background-color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 20px;
      padding-bottom: 20px;
    }
    .card_box_item_headerTitle{
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #FFFFFF;

    }
    .table_header_item_left {
      width: 150px;
      height: 60px;
      background-color: rgb(251,251,251);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_header_item{
      //width: 80px;
      height: 60px;
      background-color: rgb(251,251,251);
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
    }
    .table_item_content_item{
      //width: 80px;
      height: 40px;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
    }
    .table_item_content_itemOne{
      width: 150px;
      height: 40px;
      background-color: white;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 10px;
      padding-right: 10px;
      box-sizing: border-box;
    }
    .table_header_item_title{
      font-size: 14px;
      font-weight: bold;
    }
    .table_item_header_title{
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .table_box {
      width: 95%;
      border: 1px solid rgb(237, 237, 237);
      //margin-top: 20px;
      margin-bottom: 40px;
      padding: 0 10px;
    }
    .table_item_content_item_iconBox{
      width: 20px;
      height: 20px;
      background-color: #409EFF;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_item_content_item_icon{
      font-size: 16px;
      color: white;
    }
  }
  @media screen and (max-width: 749px) {
    .banner_Modular {
      display: flex;
      flex-direction: column;
      align-items: self-start;
      width: auto;
      height: auto;
      padding: 20px;
      position: absolute;
      top: 30px;
      left: 10px;
      z-index: 1;
    }
    .banner_Modular_Img_item {
      display: none;
    }
    .banner_Modular_Title {
      padding-bottom: 12px;
      font-size: 15px;
      color: black;
    }
    .banner_Modular_Subtitle {
      color: black;
      font-size: 12px;
    }

  }
  @media screen and (min-width: 750px) and (max-width: 780px) {
    .banner_Modular {
      display: flex;
      flex-direction: column;
      align-items: self-start;
      width: auto;
      height: auto;
      padding: 20px;
      position: absolute;
      top: 50px;
      left: 10px;
      z-index: 1;
    }
    .banner_Modular_Title {
      padding-bottom: 15px;
      font-size: 20px;
      color: black;
    }
    .banner_Modular_Subtitle {
      color: black;
      font-size: 15px;
    }
    .banner_Modular_Img  {
      margin-left: 40px;
      margin-top: 20px;
      width: 100px;
      height: 100px;
    }
    .banner_Modular_Img_item {
      width: 100%;
      height: 100%;
    }
    .index_Content{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      background-color: rgb(237,237,237);
      padding: 40px 20px;
    }
    .product_icon{
      width: 35px;
    }
    .technology_icon{
      width: 40px;
    }
    .media_icon{
      width: 30px;
    }
    .bottom_icon{
      width: 30px;
    }
    .index_Conter{
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .index_Content_header{
      font-size: 21px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .index_content_box{
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      width: 100%;
      flex-wrap: wrap;
    }
    .index_content_boxTwo{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 320px;
      flex-wrap: wrap;
    }
    .index_content_item{
      width: 280px;
      height: auto;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 20px;
      margin-top: 40px;
      margin-left: 10px;
      margin-right: 10px;
    }
    .index_content_bottom{
      width: 380px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 10px;
      margin-right: 10px;
    }
    .index_content_item_line{
      width: 100%;
      height: 4px;
      background-color: rgb(0,181,255);
    }
    .index_content_item_logo{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_bottom_logo{
      width: 50px;
      height: 50px;
      border-radius: 6px;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_item_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 35px;
    }
    .index_content_item_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 17px;
      //width: 240px;
      text-align: justify;
      padding: 0 30px;
      margin-top: 20px;
    }
    /*.index_content_item_bottomtitle{*/
    /*  font-size: 12px;*/
    /*  font-family: Microsoft YaHei;*/
    /*  font-weight: 400;*/
    /*  color: #01B6FB;*/
    /*  margin-top: 10px;*/
    /*}*/
    .index_content_top_bottomtitle{
      text-align: center;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #01B6FB;
      margin-top: 13px;
    }
    .index_content_item_top{
      width: 280px;
      height: 58px;
      background-color: #ededed;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_top_subtitle{
      text-align: justify;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 17px;
      margin-top: 12px;
    }
    .index_content_conter{
      width: 280px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
      margin-left: 10px;
      margin-right: 10px;
      padding-bottom: 20px;
    }
    .index_content_bottom_li{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      width: 100%;
      margin-bottom: 10px;
    }
    .index_content_bottom_ui{
      width: 100%;
      padding-right: 20px;
    }
    .index_skills{
      width: 100%;
      background-color: white;
      padding-top: 25px;
      /*padding-bottom: 25px;*/
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item{
      width: 140px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 20px;
    }
    .index_skills_item_img{
      width: 31px;
      height: 31px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item_title{
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 12px;
    }
    .index_skills_item_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      margin-top: 5px;
    }
    .index_skills_box{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    //合作
    .cooperation_advantage_content{
      background-color: #fafafa;
      width: 100%;
      padding: 30px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .cooperation_advantage_text{
      /*width: 163px;*/
      height: 36px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .cooperation_advantage_item_content{
      display: flex;
      margin-top: 30px;
      /*overflow-x: auto;*/
      justify-content: space-around;
      flex-wrap: wrap;
      width:100%;
    }
    .cooperation_advantage_item{
      flex-shrink: 0;
      width: 130px;
      margin-bottom: 5px;
      height: 200px;
      /*background-color: red;*/
      display: flex;
      flex-direction: column;
      /*margin-right: 25px;*/
      align-items: center;
      background-color: white;
      padding-bottom: 20px;
      box-sizing: border-box;
    }
    .line1{
      height: 5px;
      width: 100%;
      /*background-color: #01b6fb;*/
    }
    .advantage_item_title{
      margin-top: 32px;
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .advantage_item_text{
      display: block;
      margin-bottom: 5px;
      color: #747474;
      font-size: 13px;
      line-height: 17px;
      margin-left: 10px;
      margin-right: 10px;
    }
    //定价
    .card_box{
      display: flex;
      justify-content: space-around;
      flex-direction: row;
      flex-wrap: wrap;
      padding-top: 40px;
      //padding-bottom: 60px;
      width: 100%;
      padding-left: 20px;
      padding-right: 20px;
    }
    .card_box_item{
      width: 320px;
      height: auto;
      background-color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px;
      padding-bottom: 20px;
    }
    .table_header_item_left {
      width: 150px;
      height: 60px;
      background-color: rgb(251,251,251);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_header_item{
      width: 130px;
      height: 60px;
      background-color: rgb(251,251,251);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_item_content_item{
      width: 130px;
      height: 40px;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_item_content_itemOne{
      width: 150px;
      height: 40px;
      background-color: white;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 10px;
      padding-right: 10px;
      box-sizing: border-box;
    }
    .table_header_item_title{
      font-size: 16px;
      font-weight: bold;
    }
    .table_box {
      border: 1px solid rgb(237, 237, 237);
      //margin-top: 20px;
      margin-bottom: 40px;
    }
    .table_item_header_title{
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .table_item_content_item_iconBox{
      width: 20px;
      height: 20px;
      background-color: #409EFF;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_item_content_item_icon{
      font-size: 16px;
      color: white;
    }
  }
  @media screen and (min-width: 781px) and (max-width: 1199px) {
    .banner_Modular {
      display: flex;
      flex-direction: column;
      align-items: self-start;
      width: auto;
      height: auto;
      padding: 20px;
      position: absolute;
      top: 70px;
      left: 50px;
      z-index: 1;
    }
    .banner_Modular_Title {
      color: black;
      font-size: 25px;
      padding-bottom: 20px;

    }
    .banner_Modular_Subtitle {
      color: black;
      font-size: 15px;
    }
    .banner_Modular_Img  {
      margin-left: 40px;
      margin-top: 20px;
      width: 100px;
      height: 100px;
    }
    .banner_Modular_Img_item {
      width: 100%;
      height: 100%;
    }
    .index_Content{
      background-color: rgb(237,237,237);
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .product_icon{
      width: 35px;
    }
    .technology_icon{
      width: 40px;
    }
    .media_icon{
      width: 30px;
    }
    .bottom_icon{
      width: 35px;
    }
    .index_Conter{
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .index_Content_header{
      font-size: 21px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .index_content_box{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: flex-start;
      width: 100%;
      height: auto;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .index_content_boxTwo{
      display: flex;
      justify-content: center;
      align-items: center;
      /*width: 650px;*/
      flex-wrap: wrap;
      margin-top: 20px;
    }
    .index_content_item{
      width: 310px;
      height: auto;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 20px;
      margin-top: 40px;
      margin-left: 10px;
      margin-right: 10px;
    }
    .index_content_bottom{
      width: 60%;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 10px;
      margin-right: 10px;
    }
    .index_content_item_line{
      width: 100%;
      height: 4px;
      background-color: rgb(0,181,255);
    }
    .index_content_item_logo{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_bottom_logo{
      width: 50px;
      height: 50px;
      border-radius: 6px;
      background-color: rgb(0,181,255);
      position: absolute;
      top: -25px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_item_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 35px;
    }
    .index_content_item_subtitle{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      text-align: justify;
      line-height: 17px;
      //width: 240px;
      padding: 0 35px;
      margin-top: 20px;
    }
    /*.index_content_item_bottomtitle{*/
    /*  font-size: 12px;*/
    /*  font-family: Microsoft YaHei;*/
    /*  font-weight: 400;*/
    /*  color: #01B6FB;*/
    /*  margin-top: 10px;*/
    /*}*/
    .index_content_top_bottomtitle{
      text-align: center;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #01B6FB;
      margin-top: 13px;
    }
    .index_content_item_top{
      width: 100%;
      height: 58px;
      background-color: #ededed;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_top_subtitle{
      text-align: justify;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 17px;
      margin-top: 12px;
    }
    .index_content_conter{
      width: 400px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
      margin-left: 10px;
      margin-right: 10px;
      padding-bottom: 20px;
    }
    .index_content_bottom_li{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      width: 100%;
      margin-bottom: 10px;
    }
    .index_content_bottom_ui{
      width: 100%;
      padding-right: 20px;
    }
    .index_skills{
      width: 100%;
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item{
      width: 130px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 20px;
    }
    .index_skills_item_img{
      width: 31px;
      height: 31px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item_title{
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 12px;
    }
    .index_skills_item_subtitle{
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      margin-top: 5px;
    }
    .index_skills_box{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    //合作
    .cooperation_advantage_content{
      background-color: #fafafa;
      width: 100%;
      padding: 30px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .cooperation_advantage_text{
      /*width: 163px;*/
      height: 36px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .cooperation_advantage_item_content{
      display: flex;
      margin-top: 30px;
      /*overflow-x: auto;*/
      justify-content: space-around;
      flex-wrap: wrap;
      width:100%;
    }
    .cooperation_advantage_item{
      flex-shrink: 0;
      width: 175px;
      margin-bottom: 5px;
      height: 190px;
      /*background-color: red;*/
      display: flex;
      flex-direction: column;
      /*margin-right: 25px;*/
      align-items: center;
      background-color: white;
      padding-bottom: 20px;
      box-sizing: border-box;
    }
    .line1{
      height: 5px;
      width: 100%;
      /*background-color: #01b6fb;*/
    }
    .advantage_item_title{
      margin-top: 32px;
      font-size: 17px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .advantage_item_text{
      display: block;
      margin-bottom: 5px;
      color: #747474;
      font-size: 13px;
      line-height: 17px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .cooperative_partner_content{
      background-color: white;
      width: 100%;
      display: flex;
      flex-direction: column;
      padding-top: 30px;
      padding-bottom: 30px;
      padding-left: 20px;
      padding-right: 20px;
      justify-content: center;
      align-items: center;
    }
    //定价
    .card_box{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      padding-top: 40px;
      //padding-bottom: 40px;
      width: 100%;
    }
    .card_box_item{
      width:225px;
      height: auto;
      background-color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 20px;
      padding-bottom: 20px;
    }
    .table_header_item_left {
      width: 280px;
      height: 40px;
      background-color: rgb(251,251,251);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_header_item{
      width: 130px;
      height: 40px;
      background-color: rgb(251,251,251);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_item_content_item{
      width: 130px;
      height: 40px;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_item_content_itemOne{
      width: 280px;
      height: 40px;
      background-color: white;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 10px;
      padding-right: 10px;
      box-sizing: border-box;
    }
    .table_header_item_title{
      font-size: 16px;
      font-weight: bold;
    }
    .table_box {
      border: 1px solid rgb(237, 237, 237);
      //margin-top: 30px;
      margin-bottom: 30px;
    }
    .table_item_header_title{
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .table_item_content_item_iconBox{
      width: 20px;
      height: 20px;
      background-color: #409EFF;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_item_content_item_icon{
      font-size: 16px;
      color: white;
    }
  }
  @media screen and (min-width: 1200px) and (max-width: 1400px){
    .login_Forget {
      font-size: 15px;
    }
    .login-container {
      min-height: 325px;
      width: 325px;
      background-color: #fff;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: 10%;
      top: 10%;

      .login-logo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 405px;
        height: 100px;
        padding: 50px 40px 10px 40px;
        justify-content: flex-start;
        img {
          width: 60px;
          height: 60px;
        }

        span {
          margin-left: 20px;
          font-size: 30px;
          font-weight: bold;
        }
      }

      .login-left {
        width: 400px;
        height: 400px;

        .login-banner {
          width: 100%;
        }
      }

      .login-right {
        width: 400px;
        height: 400px;
        padding: 0 50px;
        position: relative;
        background: #fff;
      }

      .login-form {
        //position: absolute;
        //left: 50%;
        //top: 50%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        transform: translate(-50%, -50%);
        width: 320px;
        /*max-width: 100%;*/
        //padding: 120px 0px 0;
        margin: 0 0;
        overflow: hidden;
      }

      .login_From {
        position: absolute;
        left: 50%;
        bottom: 0%;
        transform: translate(-50%, -50%);
        width: 320px;
        /*max-width: 100%;*/
        //padding: 120px 0px 0;
        margin: 0 0;
        overflow: hidden;
      }

      .label-button {
        border-bottom: 0px solid #dfe6ec;
        padding-bottom: 10px;
        margin: 10px auto;
        font-weight: bold;
        color: #2d3a4b;
      }

      .tips {
        margin-bottom: 20px;
        font-size: 14px;
        color: #fff;

        span {
          &:first-of-type {
            margin-right: 16px;
          }
        }
      }

      .codeImg {
        height: 49px;
      }

      .svg-container {
        padding: 6px 5px 6px 15px;
        color:#889aa4;
        vertical-align: middle;
        width: 30px;
        display: inline-block;
      }

      .title-container {
        position: relative;

        .title {
          font-size: 20px;
          color: #2d3a4b;
          margin: 0px auto 20px auto;
          text-align: center;
          /*font-weight: bold;*/
        }

        .set-language {
          color: #fff;
          position: absolute;
          top: 3px;
          font-size: 18px;
          right: 0px;
          cursor: pointer;
        }
      }

      .show-pwd {
        position: absolute;
        right: 10px;
        top: 7px;
        font-size: 16px;
        color: #889aa4;
        cursor: pointer;
        user-select: none;
      }

      .thirdparty-button {
        position: absolute;
        right: 0;
        bottom: 0px;
      }

      @media only screen and (max-width: 470px) {
        .thirdparty-button {
          display: none;
        }
        .thirdparty-button {
          display: none;
        }
      }


      .pan-back-btn {
        background: #008489;
        color: #fff;
        border: none !important;
      }

      .pan-gif {
        margin: 0 auto;
        display: block;
      }

      .pan-img {
        display: block;
        margin: 0 auto;
        width: 100%;
      }

      .text-jumbo {
        font-size: 60px;
        font-weight: 700;
        color: #484848;
      }

      .list-unstyled {
        font-size: 14px;

        li {
          padding-bottom: 5px;
        }

        a {
          color: #008489;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }

      .login-bottom {
        /* margin-top: 4%;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;*/
        /*position: absolute;
        display: block;
        width: 100%;
        bottom: 4%;*/
        line-height: 30px;
        text-align: center;
        margin-bottom: 30px;

        p:nth-child(1) {
          font-size: 17px;
          color: #2d3a4b;
        }

        p:nth-child(2) {
          font-size: 10px;
          color: #2d3a4b;
        }
      }
    }
    .el-form-item {
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
      width: 85%;
    }
    /deep/.el-row {
      width: 85%;
    }
    .login_Button {
      width: 85% !important;
    }
    .console_Button {
      width: 85% !important;
    }
    .login_From {
      display: flex;
      justify-content: center;
    }
    .indexImg{
      background: radial-gradient(black, transparent);
      display: block;
      width: 100vw;
      height: 60vh;
      /*width: 1200px;*/
      /*height: 525px;*/

    }
    .banner_Modular {
      display: flex;
      flex-direction: column;
      align-items: self-start;
      width: auto;
      height: auto;
      padding: 20px;
      position: absolute;
      top: 80px;
      left: 180px;
      z-index: 1;
    }
    .banner_Modular_Title {
      color: black;
      font-size: 30px;
      padding-bottom: 20px;
    }
    .banner_Modular_Subtitle {
      color: black;
      font-size: 20px;
    }
    .banner_Modular_Img  {
      margin-left: 40px;
      margin-top: 20px;
      width: 100px;
      height: 100px;
    }
    .banner_Modular_Img_item {
      width: 100%;
      height: 100%;
    }
    .index_Content {
      background-color: rgb(237, 237, 237);
      padding-top: 35px;
      padding-bottom: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .product_icon {
      width: 35px;
    }
    .technology_icon {
      width: 40px;
    }
    .media_icon {
      width: 30px;
    }
    .bottom_icon {
      width: 30px;
    }
    .index_Conter {
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .index_Content_header {
      font-size: 21px;
       font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .index_content_box {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      width: 1200px;
      height: auto;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .index_content_boxTwo {
      display: flex;
      justify-content: center;
      align-items: center;
      /*width: 650px;*/
      flex-wrap: wrap;
      margin-top: 20px;
    }
    .index_content_item {
      width: 280px;
      height: auto;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 20px;
      margin-top: 40px;
      margin-left: 10px;
      margin-right: 10px;
    }
    .index_content_bottom {
      width: 380px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 10px;
      margin-right: 10px;
    }
    .index_content_item_line {
      width: 280px;
      height: 4px;
      background-color: rgb(0, 181, 255);
    }
    .index_content_item_logo {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgb(0, 181, 255);
      position: absolute;
      top: -25px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_bottom_logo {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      background-color: rgb(0, 181, 255);
      position: absolute;
      top: -25px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_item_title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 35px;
    }
    .index_content_item_subtitle {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 20px;
      width: 240px;
      text-align: justify;
      margin-top: 20px;
    }
    /*.index_content_item_bottomtitle{*/
    /*  font-size: 12px;*/
    /*  font-family: Microsoft YaHei;*/
    /*  font-weight: 400;*/
    /*  color: #01B6FB;*/
    /*  margin-top: 10px;*/
    /*}*/
    .index_content_top_bottomtitle {
      text-align: center;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #01B6FB;
      margin-top: 13px;
    }
    .index_content_item_top {
      width: 280px;
      height: 58px;
      background-color: #ededed;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_top_subtitle {
      text-align: justify;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 17px;
      margin-top: 12px;
    }
    .index_content_conter {
      width: 280px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
      margin-left: 10px;
      margin-right: 10px;
      padding-bottom: 20px;
    }
    .index_content_bottom_li {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      width: 100%;
      margin-bottom: 10px;
    }
    .index_content_bottom_ui {
      width: 100%;
      padding-right: 20px;
    }
    .index_skills {
      width: 100%;
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item {
      width: 160px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 20px;
    }
    .index_skills_item_img {
      width: 31px;
      height: 31px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item_title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 12px;
    }
    .index_skills_item_subtitle {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      margin-top: 5px;
    }
    .index_skills_box {
      width: 1200px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    //合作
    .cooperation_advantage_content{
      background-color: #fafafa;
      width: 100%;
      padding-top: 34px;
      padding-bottom: 57px;
      padding-left: 20px;
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .cooperation_advantage_text{
      /*width: 163px;*/
      height: 36px;
      font-size: 26px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .cooperation_advantage_item_content{
      width: 1200px;
      display: flex;
      justify-content: space-around;
      margin-top: 30px;

    }
    .cooperation_advantage_item{
      width: 200px;
      height: 180px;
      /*background-color: red;*/
      display: flex;
      flex-direction: column;
      margin-right: 20px;
      margin-left: 20px;
      align-items: center;
      background-color: white;
      padding-bottom: 20px;
      box-sizing: border-box;
    }
    .line1{
      height: 5px;
      width: 100%;
      /*background-color: #01b6fb;*/
    }
    .advantage_item_title{
      margin-top: 20px;
      font-size: 17px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .advantage_item_text{
      display: block;
      margin-bottom: 5px;
      margin-left: 20px;
      margin-right: 20px;
      line-height: 17px;
      color: #747474;
      font-size: 13px;
    }
    //定价
    .card_box{
      display: flex;
      /*flex-direction: row;*/
      justify-content: space-around;
      flex-wrap: wrap;
      padding-top: 40px;
      //padding-bottom: 50px;
      width: 1200px;
    }
    .card_box_item{
      width: 270px;
      height: auto;
      background-color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px;
      padding-bottom: 20px;
    }
    .table_header_item_left {
      width: 100%;
      height: 40px;
      background-color: rgb(251,251,251);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_header_item{
      width: 196px;
      height: 40px;
      background-color: rgb(251,251,251);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_item_content_item{
      width: 200px;
      height: 40px;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_item_content_itemOne{
      width: 100%;
      height: 40px;
      background-color: white;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 10px;
      padding-right: 10px;
      box-sizing: border-box;
    }
    .table_box{
      border: 1px solid rgb(237,237,237);
      //margin-top: 40px;
      margin-bottom: 30px;
    }
    .table_header_item_title{
      font-size: 16px;
      font-weight: bold;
    }
    .table_header_item_title{
      font-size: 16px;
      font-weight: bold;
    }
    .table_item_header_title{
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .table_item_content_item_iconBox{
      width: 20px;
      height: 20px;
      background-color: #409EFF;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_item_content_item_icon{
      font-size: 16px;
      color: white;
    }
  }
  @media screen and (min-width: 1401px){

    .indexImg{
      background: radial-gradient(black, transparent);
      display: block;
      width: 100vw;
      height: 60vh;
      /*width: 1200px;*/
      /*height: 525px;*/

    }
    .banner_Modular {
      display: flex;
      flex-direction: column;
      align-items: self-start;
      width: auto;
      height: auto;
      padding: 20px;
      position: absolute;
      top: 80px;
      left: 180px;
      z-index: 1;
    }
    .banner_Modular_Title {
      color: black;
      font-size: 30px;
      padding-bottom: 20px;
    }
    .banner_Modular_Subtitle {
      color: black;
      font-size: 20px;
    }
    .banner_Modular_Img  {
      margin-left: 40px;
      margin-top: 20px;
      width: 100px;
      height: 100px;
    }
    .banner_Modular_Img_item {
      width: 100%;
      height: 100%;
    }
    .index_Content {
      background-color: rgb(237, 237, 237);
      padding-top: 35px;
      padding-bottom: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .product_icon {
      width: 35px;
    }
    .technology_icon {
      width: 40px;
    }
    .media_icon {
      width: 30px;
    }
    .bottom_icon {
      width: 30px;
    }
    .index_Conter {
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .index_Content_header {
      font-size: 21px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .index_content_box {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      width: 1200px;
      height: auto;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .index_content_boxTwo {
      display: flex;
      justify-content: center;
      align-items: center;
      /*width: 650px;*/
      flex-wrap: wrap;
      margin-top: 20px;
    }
    .index_content_item {
      width: 280px;
      height: auto;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 20px;
      margin-top: 40px;
      margin-left: 10px;
      margin-right: 10px;
    }
    .index_content_bottom {
      width: 380px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      margin-left: 10px;
      margin-right: 10px;
    }
    .index_content_item_line {
      width: 280px;
      height: 4px;
      background-color: rgb(0, 181, 255);
    }
    .index_content_item_logo {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgb(0, 181, 255);
      position: absolute;
      top: -25px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_bottom_logo {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      background-color: rgb(0, 181, 255);
      position: absolute;
      top: -25px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_item_title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 35px;
    }
    .index_content_item_subtitle {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 20px;
      width: 240px;
      text-align: justify;
      margin-top: 20px;
    }
    /*.index_content_item_bottomtitle{*/
    /*  font-size: 12px;*/
    /*  font-family: Microsoft YaHei;*/
    /*  font-weight: 400;*/
    /*  color: #01B6FB;*/
    /*  margin-top: 10px;*/
    /*}*/
    .index_content_top_bottomtitle {
      text-align: center;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #01B6FB;
      margin-top: 13px;
    }
    .index_content_item_top {
      width: 280px;
      height: 58px;
      background-color: #ededed;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_content_top_subtitle {
      text-align: justify;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 17px;
      margin-top: 12px;
    }
    .index_content_conter {
      width: 280px;
      background-color: white;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
      margin-left: 10px;
      margin-right: 10px;
      padding-bottom: 20px;
    }
    .index_content_bottom_li {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      width: 100%;
      margin-bottom: 10px;
    }
    .index_content_bottom_ui {
      width: 100%;
      padding-right: 20px;
    }
    .index_skills {
      width: 100%;
      background-color: white;
      padding-top: 35px;
      padding-bottom: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item {
      width: 160px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 20px;
    }
    .index_skills_item_img {
      width: 31px;
      height: 31px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .index_skills_item_title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      margin-top: 12px;
    }
    .index_skills_item_subtitle {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #747474;
      line-height: 13px;
      margin-top: 5px;
    }
    .index_skills_box {
      width: 1200px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    //合作
    .cooperation_advantage_content{
      background-color: #fafafa;
      width: 100%;
      padding-top: 34px;
      padding-bottom: 57px;
      padding-left: 20px;
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .cooperation_advantage_text{
      /*width: 163px;*/
      height: 36px;
      font-size: 26px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4D4D4D;
    }
    .cooperation_advantage_item_content{
      width: 1200px;
      display: flex;
      justify-content: space-around;
      margin-top: 30px;

    }
    .cooperation_advantage_item{
      width: 200px;
      height: 180px;
      /*background-color: red;*/
      display: flex;
      flex-direction: column;
      margin-right: 20px;
      margin-left: 20px;
      align-items: center;
      background-color: white;
      padding-bottom: 20px;
      box-sizing: border-box;
    }
    .line1{
      height: 5px;
      width: 100%;
      /*background-color: #01b6fb;*/
    }
    .advantage_item_title{
      margin-top: 20px;
      font-size: 17px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .advantage_item_text{
      display: block;
      margin-bottom: 5px;
      margin-left: 20px;
      margin-right: 20px;
      line-height: 17px;
      color: #747474;
      font-size: 13px;
    }
    //定价
    .card_box{
      display: flex;
      /*flex-direction: row;*/
      justify-content: space-around;
      flex-wrap: wrap;
      padding-top: 40px;
      //padding-bottom: 50px;
      width: 1200px;
    }
    .card_box_item{
      width: 270px;
      height: auto;
      background-color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px;
      padding-bottom: 20px;
    }
    .table_header_item_left {
      width: 100%;
      height: 40px;
      background-color: rgb(251,251,251);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_header_item{
      width: 196px;
      height: 40px;
      background-color: rgb(251,251,251);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_item_content_item{
      width: 200px;
      height: 40px;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_item_content_itemOne{
      width: 100%;
      height: 40px;
      background-color: white;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 10px;
      padding-right: 10px;
      box-sizing: border-box;
    }
    .table_box{
      border: 1px solid rgb(237,237,237);
      //margin-top: 40px;
      margin-bottom: 30px;
    }
    .table_header_item_title{
      font-size: 16px;
      font-weight: bold;
    }
    .table_header_item_title{
      font-size: 16px;
      font-weight: bold;
    }
    .table_item_header_title{
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .table_item_content_item_iconBox{
      width: 20px;
      height: 20px;
      background-color: #409EFF;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .table_item_content_item_icon{
      font-size: 16px;
      color: white;
    }
  }
  //定价表格
  .table_header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }

  .border-right{
    border-right: 1px solid rgb(237,237,237);
  }

  .table_item{
    display: flex;
    flex-direction: column;
  }

  .table_item_header{
    background-color: rgb(251,251,251);
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    border-top: 1px solid rgb(237,237,237);
  }

  .table_item_content{
    display: flex;
    flex-direction: row;
    align-items: center;
    border-top: 1px solid rgb(237,237,237);
  }
  @media screen  and (max-width: 1200px) {
    .login_box {
      display: none;
    }
  }
</style>
